<template>
		<view class="home">
			<!-- 自定义组件 -->
			<navbar v-model="searchVal"></navbar>
			<tab :list="tabList" :sfalg="searchflag" @tab="tab" @cIcon="cIcon" ></tab>	
			<view class="sift">
				<view class="sift-content">
					<view @click="sortDefC()" :class="{light:sortDef}">默认</view>
					<view @click="sortPriC()" :class="{light:sortPri}">价格</view>
					<view @click="sortBuyC()" :class="{light:sortBuy}">销量</view>
					<view>
						<text class="iconfont icon-liebiao2" @click="openpop()"></text>
					</view>
				</view>
			</view>
			<view class="scroll" v-show="iconType">
				<scroll-view  class="list-scroll" scroll-y='true' lower-threshold="30" @scrolltolower="scrollLower">
					
						<!-- 插槽 -->
						<view v-for="item in LeafList" >
							<list-card :leaf="item" ></list-card>
						</view>
						<uni-load-more :status="loadStatus"></uni-load-more>		
					<!-- v-for循环，被包裹起来就不会被触发page页面的滚动条才会触发触底时间 -->
				</scroll-view>
			</view> 
			<!-- 筛选条件组件 -->
			
			<view class="scroll" v-show="!iconType">
				<scroll-view  class="list-scroll" scroll-y='true' lower-threshold="30" @scrolltolower="scrollLower">
					
						<!-- 插槽 -->
						<view class="bigIcon">
						<view v-for="item in LeafList" >
							<list-item :leaf="item" ></list-item>
						</view>
						</view>
						<uni-load-more :status="loadStatus"></uni-load-more>		
					<!-- v-for循环，被包裹起来就不会被触发page页面的滚动条才会触发触底时间 -->
				</scroll-view>
			
			</view> 
			
			<uniPopup ref="childpop" @pop="pop"></uniPopup>
		</view>
</template>

<script>
	import navbar from '@/components/navbar/navbar.vue'
	import tab from '@/components/tab/tab.vue'
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'

	export default{
		components:{
			navbar,
			tab
		},
		data(){
			return{
				searchflag:false,
				searchVal:'',
				iconType:true,
				LeafList:[],
				sortPri:false,
				sortBuy:false,
				sortDef:true,
				params:{
					pageNum:1,
					pageSize:6,
					leafType:1,
					searchVal:'',
					princeTop:10000,
					princeBottm:0,
					position:'',
					sortpri:false,
					sortbuy:false,
					sortdef:true
					
				},
				loadStatus:'nomore',
				//列表总共有多少页
				pageCount:0,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onPullDownRefresh(){
			this.params.pageNum=1
			this.getListCount()
			this.getLeafList()
			
		},
		//上拉加载更多
		onReachBottom(){
			console.log("上拉加载更多message")
			if(this.params.pageNum<this.pageCount){
				this.params.pageNum+=1
				this.getLeafList()
			}
		},
		onLoad(){
			
		},
		onShow(){
			let option = uni.getStorageSync('e');
			console.log("onshow传来的值",option)
			if(option){	
				this.searchVal=option.searchval
				this.searchFn()				
			}
			else{
				console.log("搜索框为空")
				this.getListCount()
				this.getLeafList()
			}
			uni.removeStorageSync('e');
		},
		methods:{
			openpop(){
				this.$refs.childpop.openpop();
			},
			//默认排序,页号赋成1 经过茶叶列表置空操作
			sortDefC(){
				this.sortDef=true
				this.sortPri=false
				this.sortBuy=false
				this.params.sortdef=true
				this.params.sortpri=false
				this.params.sortbuy=false
				this.params.pageNum=1
				this.params.searchVal=""
				if(this.params.searchVal!=""){
					this.getSearchList()
				}else if(this.params.princeBottm!=0){
					this.getFilterList()
				}else{
					this.getLeafList()
				}
				
			},
			//按价格排序
			sortPriC(){
				this.sortDef=false
				this.sortPri=true
				this.sortBuy=false
				this.params.sortdef=false
				this.params.sortpri=true
				this.params.sortbuy=false
				this.params.pageNum=1
				if(this.params.searchVal!=""){
					this.getSearchList()
				}else if(this.params.princeBottm!=0){
					this.getFilterList()
				}else{
					this.getLeafList()
				}
			},
			//按销量排序
			sortBuyC(){
				this.sortDef=false
				this.sortPri=false
				this.sortBuy=true
				this.params.sortdef=false
				this.params.sortpri=false
				this.params.sortbuy=true
				this.params.pageNum=1
				if(this.params.searchVal!=""){
					this.getSearchList()
				}else if(this.params.princeBottm!=0){
					this.getFilterList()
				}else{
					this.getLeafList()
				}
			},
			//整合请求参数
			initPram(){
				
			},
			tab(data){
				//接收子组件传来的选中的信息
				//又开始从第一页查询
				this.sortDefC()
				this.params.pageNum=1
				this.params.leafType=data.index+1
				this.getListCount()
				this.getLeafList()
			},
			cIcon(data){
				this.iconType=data.iconTy
				
			},
			//接收从筛选组件传来的筛选条件
			pop(data){
				console.log("筛选条件--")
				this.sortDefC()
				console.log(data)
				
				this.params.pageNum=1
				this.params.princeBottm=data.data.lowpri
				this.params.princeTop=data.data.higpri
				this.params.position=data.data.position
				const pos1=this.params.position
				console.log(pos1.length)
				const pos2=pos1.substring(1,pos1.length-1)
				console.log(pos1)
				console.log(pos2)
				this.getListCount()
				this.getFilterList()
				console.log("筛选条件end")
			},
			scrollLower(){
				console.log("上拉加载更多message")
				if(this.params.pageNum<this.pageCount){
					this.params.pageNum+=1
					this.getListCount()
					this.getLeafList()
				}
			},
			searchFn(){
				console.log("调用父组件的搜索事件")
				console.log(this.searchVal)
				if(this.searchVal!=''){
					//传给选项卡子组件
					this.searchflag=true
					console.log("搜索框不为空")
					//页数置为1
					this.params.pageNum=1
					this.params.searchVal=this.searchVal
					this.params.leafType=-1
					this.getListCount()
					this.getSearchList()
					
				}
				if(this.searchVal==''){
					console.log("搜索框为空")
				}
				
				
			},
			getSearchList(){
				uni.request({
					url:this.$baseUrl+'Leaflist/search',
					method: 'POST',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						// this.LeafList=res.data.list
						this.dataHandle(res)
						
					}
				})
			},
			getFilterList(){
				uni.request({
					url:this.$baseUrl+'Leaflist/filter',
					method: 'POST',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						// this.LeafList=res.data.list
						this.dataHandle(res)
						
					}
				})
			},
			getLeafList(){
				uni.request({
					url:this.$baseUrl+'Leaflist',
					method: 'POST',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						// this.LeafList=res.data.list
						this.dataHandle(res)
						
					}
				})
			},
			getListCount(){
				console.log(this.params)
				uni.request({
					url:this.$baseUrl+'Listcount',
					method: 'POST',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						console.log(res.data.count[0].total)
						this.pageCount=Math.floor((res.data.count[0].total+this.params.pageSize-1)/this.params.pageSize)
						console.log(this.pageCount)
					}
				})
			},
			//懒加载
			dataHandle(res){
				if(this.params.pageNum==1){
					this.LeafList=[]
				}
				this.LeafList.push(...res.data.list)
				if(this.params.pageNum>=this.pageCount){
					this.loadStatus='nomore'
				}else{
					this.loadStatus='more'
				}
				
			}
			//点击请求，还是一下请求完
			
			// ...mapActions(['checkedAllFn']),
			// ...mapMutations(['selectedItem'])
		},
		computed:{
			...mapState({
				tabList:state=>state.message.tabList,
				// GreenList:state=>state.message.GreenList
			})
			// ...mapGetters(['getLeafList'])
		}
		
	}
</script>

<style lang="scss">
	// 整个页面
	page{
		height: 100%;
		display: flex;
		
	}
	.home{
		display: flex;
		flex-direction: column;
		//垂直排列
		flex:1;
		.sift{
			display: flex;
			width: 100%;
			background: #e2fbd4;
			.sift-content{
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 10px 15px;
				color: #333333;
				font-size: 14px;
				.light{
					color: #2f5117a8;
				}
			}
		}
		.scroll{
				flex:1;		
				overflow: hidden;	
				box-sizing: border-box;
				.list-scroll{
					height: 100%;		
					display: flex;						
					flex-direction: column;
					.bigIcon{
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
					}
				}
			}
			
	
	}
</style>
